<template>
  <view class="content">
    <view class="tab">
      <view class="tab-item" @tap="tab(index)" v-for="(item, index) in arr" :key="index" :class="index == tabIndex ? 'tab-active' :'' ">{{item}}</view>
    </view>
    <view style="margin-top:24rpx" v-if="tabIndex==0">
      <view class="award" v-for="(item, index) in myluck" :key="index">
        <view class="award-1">
          <view class="award-1-top">{{item.prizeTitle?item.prizeTitle:item.prizeDescription}}</view>
          <view class="award-1-bottom" v-if="item.receiveEndTime">截止兑换时间： {{item.receiveEndTime}}</view>
        </view>
        <view class="award-2 award-bg1" v-if="item.status==0"  @click="$util.Tips(`/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`)">去兑奖</view>
        <view class="award-2 award-bg1" v-if="item.status==1"  @click="$util.Tips(`/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`)">去核销</view>
        <view class="award-2 award-bg2" v-if="item.status==2"  @click="$util.Tips(`/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`)">出奖中</view>
        <view class="award-2 award-bg3" v-if="item.status==3"  @click="$util.Tips(`/subpageC/user_hexiao_detail/user_hexiao_detail?id=${item.activityId}`)">已完成</view>
      </view>
    </view>
    <view style="margin-top:24rpx" v-else-if="tabIndex==1">
      <view class="award" v-for="(item, index) in myluck" :key="index">
        <img src="/static/coupon_active.svg" alt="" class="award-3" v-if="index==0">
        <img src="/static/coupon_done.svg" alt="" class="award-3" v-else>
        <view class="award-1">
          <view class="award-1-top" :class="index==1 ? 'c4' : '' ">{{item.title}}</view>
          <view class="award-1-bottom" :class="index==1? 'c4' : '' ">{{item.receiveEndTime}}失效</view>
        </view>
        <view class="award-2 award-bg2" v-if="index==0">去使用</view>
        <view class="award-2 award-bg4" v-if="index==3">已使用</view>
        <view class="award-2 award-bg4" v-if="index==5">已过期</view>
      </view>
	  
    </view>
    <ListFooter :loadtitle="loadtitle"></ListFooter>
  </view>
</template>

<script>
import ListFooter from '../../components/listFooter/listFooter.vue';
	
	import {
		mapGetters
	} from "vuex";
	import {
		recordListPrize,
		prizeCoupon
	} from '@/api/activity.js';
  export default {
	  
	  computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
    components: {ListFooter},
    data() {
      return {
		  loading: false,
		  loadend: false,
		  loadtitle: '加载更多',
        tabIndex: 0,
        arr: ['中奖奖品', '优惠券'],
        award: [1, 2, 3, 4],
        coupon: [],
		myluck:[],
		page:1,
    limit: 20
		
      }
    },
	onLoad() {
		this.getmyluck()
	},
	onReachBottom: function() {
	  this.page++
	  this.getmyluck();
	},
	onPullDownRefresh() {
	  this.page = 1
    this.myluck = []
    this.loadend = false
	    this.getmyluck();
	    setTimeout(function () {
	      uni.stopPullDownRefresh();
	    }, 1000);
	  },
    methods: {
		tab(i){
			this.loadend=false
			this.tabIndex=i
			this.myluck = []
			this.page=1
			this.getmyluck()
		},
      async getmyluck(){
		  if (this.loading) return;
		  if (this.loadend) return;
		  this.loading = true;
		  this.loadtitle = "";
      uni.showLoading({
        title: '加载中'
      })
      let info
		  if(this.tabIndex==0){
			  info = await recordListPrize({
          page: this.page,
          limit: this.limit
        })
		  }else{
			  info = await prizeCoupon({
          page: this.page,
          limit: this.limit
        })
      }
      uni.hideLoading()
      let list = info.data.list
      let loadend = list.length < this.limit;
      this.myluck = this.myluck.concat(list)

      this.loadend = loadend;
      this.loading = false;
      this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
    }
      
    }
  }
</script>

<style lang="scss">
	.content{
		width: 100%;
		padding-bottom: 30rpx;
		padding-top: 82rpx;
	}
.tab {
  width:100%;
  height: 82rpx;
  display: flex;
  background: #fff;
  position: fixed;
  top:0;
  left:0;
  
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    color: #525252;
  }
  &-active {
    color: #DF4B43!important;
  }
}
.award {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-radius: 20rpx;
  height: 180rpx;
  width: 710rpx;
  margin: 0 auto 24rpx;
  background: #fff;
  &-bg1 {
    border-color: #FF9E45!important;
    color: #FF9E45!important;
  }
  &-bg2 {
    border-color: #DF4B43!important;
    color: #DF4B43!important;
  }
  &-bg3 {
    border-color: #979797!important;
    color: #979797!important;
  }
  &-bg4 {
    border-color: #BDBDBD!important;
    color: #BDBDBD!important;
  }
  .c4 {
    color: #BDBDBD!important;
  }
  &-2 {
    width: 132rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    background: #fff;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 500;
    box-sizing: content-box;
    border-radius: 10rpx;

  }
  &-1 {
    flex:1;
    display: flex;
    justify-content: space-evenly;
    height: 120rpx;
    flex-direction: column;
    &-top {
      color: #525252;
      font-family: PingFang SC;
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
    }
    &-bottom {
      color: #979797;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
    }
  }
  &-3 {
    width: 120rpx;
    height: 120rpx;
    margin-right: 24rpx;
  }
}
</style>
